<div class="tpl-portlet-components" xmlns:th="http://www.thymeleaf.org">
    <div class="portlet-title">
        <div class="caption font-green bold">
            保存人物信息
        </div>
        <div class="tpl-portlet-input tpl-fz-ml">
            <div class="portlet-input input-small input-inline">
                <div class="input-icon right">
                    <i class="am-icon-search"></i>
                    <input type="text" class="form-control form-control-solid" placeholder="搜索..."></div>
            </div>
        </div>
    </div>
    <div class="tpl-block ">
        <div class="am-g tpl-amazeui-form">
            <div class="am-u-sm-12 am-u-md-9">
                <form class="am-form am-form-horizontal" name="personForm" id="personFormId">
                    <input type="hidden" name="id" th:value="${person==null?'':person.id}" id="personId">
                    <div class="am-form-group">
                        <label for="name" class="am-u-sm-3 am-form-label">姓名 / Name</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="name" id="name" placeholder="用户昵称"
                                   th:value="${person == null? 'jack' : person.name}">
                            <!--<small>这个人叫什么呢?</small>-->
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">星座 / Constellation
                            <span class="tpl-form-line-small-title"></span></label>
                        <div class="am-u-sm-9">
                            <select data-am-selected="{searchBox: 1}" id="constellation" name="constellation">

                            </select>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="profession" class="am-u-sm-3 am-form-label">职业 / Profession</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="profession" id="profession" placeholder="人物职业"
                                   th:value="${person == null? '演员' : person.profession}">
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label for="otherName" class="am-u-sm-3 am-form-label">绰号 / OtherName</label>
                        <div class="am-u-sm-9">
                            <input type="text" name="otherName" id="otherName" placeholder="绰号"
                                   th:value="${person == null? '张三' : person.otherName}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="gender" class="am-u-sm-3 am-form-label">性别 / Gender</label>
                        <div class="am-u-sm-9">
                            男&nbsp;<input name="gender" type="radio" id="gender" value="男" checked>
                            女&nbsp;<input name="gender" type="radio" value="女"
                                          th:checked="${person==null?false:person.gender=='女'}">
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="birthDate" class="am-u-sm-3 am-form-label">出生日期 / birthDate</label>
                        <div class="am-u-sm-9">
                            <input type="date" name="birthDate" id="birthDate" placeholder="请填写出生日期"
                                   th:value="${person == null ? '1995-01-01': #dates.format(person.birthDate,'yyyy-MM-dd')}">
                            <small>填写一下自己的出生日期吧</small>
                        </div>
                    </div>

                    <div class="am-form-group" id="birthPlace">
                        <label for="profession" class="am-u-sm-3 am-form-label">出生地 / BirthPlace</label>
                        <div class="am-u-sm-9 am-form-inline">
                            <div id="distpicker">
                                <ul class="am-avg-sm-* am-thumbnails">
                                    <li>
                                        <div class="am-input-lg">
                                            <select class="form-control" id="province"
                                                    style="height: 100%;width: 100%;margin-right: 20px"
                                                    th:attr="defaultId=${person==null?0:person.birthPlace.province.code}"></select>
                                        </div>
                                    </li>
                                    <li class="am-input-lg">
                                        <div class="am-input-lg">
                                            <select class="form-control" id="city"
                                                    style="height: 100%;width: 100% ;margin-left: 30px"
                                                    th:attr="defaultId=${person==null?0:person.birthPlace.city.code}"></select>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="am-input-lg">
                                            <select class="form-control" id="district"
                                                    style="height: 100%;width: 100%;margin-left: 60px"
                                                    th:attr="defaultId=${person==null?0:person.birthPlace.district.code}"></select>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>


                    <div class="am-form-group">
                        <label for="description" class="am-u-sm-3 am-form-label">人物描述 / Description</label>
                        <div class="am-u-sm-9">
                            <textarea type="text" name="description" id="description"
                                      placeholder="人物描述">description </textarea>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">人物照片 <span
                                class="tpl-form-line-small-title">Movie Covers</span></label>
                        <div class="am-u-sm-9">
                            <div class="am-form-group am-form-file">
                                <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                    <i class="am-icon-cloud-upload"></i> 添加人物照片
                                </button>
                                <input type="hidden" name="image"
                                       th:value="${person==null?'default.jpg':person.image}">
                                <input id="imageFile" type="file">
                                <span id="imageFileName" style="color: red"></span>
                            </div>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <button type="button" onclick="savePerson()" class="am-btn am-btn-primary">保存人物</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    initConstellation();
    var constellationId = "[[${person==null?0:person.constellation}]]";
    $("#constellation").find("option[value=" + constellationId + "]").attr("selected", true);
    var province = "[[${person==null?'福建省': person.birthPlace.province.name}]]";
    var city = "[[${person==null?'厦门市':person.birthPlace.province.name}]]";
    var district = "[[${person==null?'集美区':person.birthPlace.province.name}]]";
    initPlaceSelect(province, city, district);
    //添加图片文件选择事件
    $('#imageFile').on('change', function() {
        $.each(this.files, function() {
            $("#imageFileName").text(this.name);
        });
    });
</script>
